<template>
  <dv-border-box-7 id="right-row-center-content">
    <div class="container-tittle">订单统计</div>
    <div class="right-row-center-content-title">
      当前CT:
      <dv-digital-flop :config="config1" style="width: 200px; height: 50px" />
    </div>
    <!-- <div class="right-row-center-content-title">
      合格率:
      <dv-digital-flop :config="config2" style="width: 200px; height: 50px" />
    </div> -->
    <div class="right-row-center-content-title">当前订单完成情况:</div>
    <dv-water-level-pond :config="config" class="water-level-chart" />
  </dv-border-box-7>
</template>

<script>
import * as echarts from "echarts";
import Axios from "axios";
export default {
  name: "leftRowUpChart",
  data() {
    return {
      config: {
        data: [50],
        shape: "roundRect",
        waveHeight: 25,
        waveNum: 2,
      },
      config1: {
        number: [60],
        toFixed: 1,
        content: "{nt}s",
      },
      config2: {
        number: [99],
        toFixed: 1,
        content: "{nt}%",
      },
    };
  },
  methods: {
    async UpdateData() {
      var _this = this;
      var url = this.$baseUrl + "order/current-progress";
      await Axios.get(url).then(
        (response) =>
          (_this.config = {
            data: [response.data],
            shape: "roundRect",
            waveHeight: 25,
            waveNum: 2,
          })
      );

      //     var url1 = this.$baseUrl + "";
      //   await  Axios.get(url1).then(
      //       (response) =>
      //         (_this.config1 = {
      //           number: [response.data],
      //           toFixed: 1,
      //           content: "{nt}s",
      //         })
      //     );

      //     var url2 = this.$baseUrl + "";
      //  await  Axios.get(url2).then(
      //       (response) =>
      //         (_this.config2 = {
      //           number: [response.data],
      //           toFixed: 1,
      //           content: "{nt}%",
      //         })
      //     );
    },
  },

  //排查接口问题
  mounted() {
    const { UpdateData } = this;

    this.UpdateData();

     setInterval(this.UpdateData, 5000)
  },
};
</script>

<style lang="less">
#right-row-center-content {
  width: 100%;
  height: 25%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
}
.container-tittle{
   font-size: 20px;
    display: flex;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
}
.right-row-center-content-title {
  font-weight: bold;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 20px;
  justify-content: space-around;
}
.water-level-chart {
  width: 40%;
  height: 45%;
  display: flex;
}
</style>
